<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school @click="changeRegion" @visible="threeSchoolVisible=$event"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
          <div style="display: flex; justify-content: space-between; align-items: center;" :style="threeSchoolVisible ? '' : 'padding-left: 16px'">
            <b v-if="active_name.length"> 当前位置：
              <span v-for="(v, i) in active_name" :key="i">{{ v }}{{ i == 3 ? "" : "/" }}</span>
            </b>
            <el-input size="small" clearable v-model="query.title" placeholder="请输入学校名称" style="width: 200px">
              <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="reload"></el-button>
            </el-input>
          </div>
          <div class="ele-form-actions">
            <el-button size="mini" type="danger" icon="el-icon-delete" class="ele-btn-icon" :disabled="!selection.length"
                       @click="removeBatch">删除 </el-button>
              <el-button size="mini" type="primary" icon="el-icon-plus" class="ele-btn-icon"
                         @click="openEdit({}, true)">添加
            </el-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <el-table border lazy ref="table" :data="data" v-loading="loading" height="calc(100vh - 315px)"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="序号" width="55" align="center" type="index">
            <template slot-scope="scope">
                <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
                </span>
            </template>
          </el-table-column>
          <el-table-column label="学校" align="center" prop="title" />
          <el-table-column label="省份" align="center" prop="province_name" />
          <el-table-column label="城市" align="center" prop="city_name" />
          <el-table-column label="区县" align="center" prop="district_name" />
          <el-table-column label="街道" align="center" prop="streets_name" />
          <el-table-column label="具体地址" align="center" prop="address" width="200" />
          <el-table-column label="排序" align="center" prop="sort" width="50" />
          <el-table-column label="创建时间" align="center" prop="create_time" width="200">
            <template slot-scope="scope">{{
                scope.row.create_time
                    ? $util.toDateString(scope.row.create_time)
                    : "暂无"
              }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200" :resizable="true">
            <template slot-scope="{ row }">
              <el-link type="text" :underline="false" icon="el-icon-edit" @click="openEdit(row)">修改
              </el-link>
              <!-- <el-popconfirm
                class="ele-action"
                title="确定要删除该学校吗？"
                @confirm="remove(row)"
              >
                <el-link
                  type="text"
                  slot="reference"
                  :underline="false"
                  icon="el-icon-delete"1
                  >删除
                </el-link>
              </el-popconfirm> -->
              <br />
              <el-link type="text" :underline="false" @click="path_jump(row, 'safe')">学校区域
              </el-link>
              <el-link type="text" :underline="false" @click="path_jump(row, 'pitfall')">危险区域
              </el-link>
              <el-link type="text" :underline="false" @click="openEdit1(row, '上课禁用', 'stealth')">上课禁用
              </el-link>
              <!--<el-link-->
              <!--  type="text"-->
              <!--  :underline="false"-->
              <!--  @click="openEdit1(row, '静音', 'mute')"-->
              <!--  >静音设置-->
              <!--</el-link>-->
              <el-link type="text" :underline="false" @click="goToInfoCenter(row)">数据中心
              </el-link>
              <el-link type="text" :underline="false" @click="goToPoliceCenter(row)">报警中心
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getData" />
      </el-card>
    </div>
    <!-- 编辑弹窗 -->
    <schoole-edit :data="current" :visible.sync="showEdit" @done="reload" />
    <schoole-jy-ys-edit :data="current1" :visible.sync="showEdit1" @done="reload" />
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import schooleEdit from "./schoole-edit";
  import schooleJyYsEdit from "./schoole-jy-ys-edit.vue";
  import regions from "ele-admin/packages/regions";
  import threeSchool from "@/components/three_schoole.vue";

  export default {
    name: "SystemUser",
    components: {
      schooleEdit,
      threeSchool,
      schooleJyYsEdit
    },
    computed: {
      ...mapGetters(["permission"]),
    },
    data() {
      return {
        threeSchoolVisible: true,
        // 省市区数据
        regions: regions,
        // 选中的省市区
        city: [],
        row_span: 20,
        loading: false, // 表格加载状态
        selection: [], // 表格选中数据
        total: 0, // 数据总数
        data: [], // 表格数据接口
        // 表格搜索条件
        query: {
          page: 1,
          limit: 20,
          province_code: "",
          city_code: "",
          district_code: "",
          streets_code: "",
          title: "",
        },
        active_name: [],
        streetsList: [],
        schoolList: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        showEdit1: false,
        current1: null,
        // 是否显示导入弹窗
        showImport: false,
      };
    },
    mounted() {
      this.getData();
    },
    watch: {},
    methods: {
      goToInfoCenter(row) {
        let routeData = this.$router.resolve({
          path: "/management/dataCenter/infoCenter?schoole_id=" + row.id
        });
        window.open(routeData.href, '_blank');
        // this.$router.push({
        //   path:'/management/dataCenter/infoCenter?schoole_id='+id
        // })
      },
      goToPoliceCenter(row) {
        let routeData = this.$router.resolve({
          path: "/management/dataCenter/policeCenter?schoole_id=" + row.id
        });
        window.open(routeData.href, '_blank');
        // this.$router.push({
        //   path:'/management/dataCenter/policeCenter?schoole_id='+id
        // })
      },
      path_jump(row, type) {
        this.$router.push({
          path: "./region",
          query: {
            id: row.id,
            mode: type,
            schoole_name: row.title,
            activeList: [
              row.province_code,
              row.city_code,
              row.district_code,
              row.streets_code,
            ],
          },
        });
      },
      changeRegion(event) {
        this.query.province_code = event.values[0]
        this.query.city_code = event.values[1]
        this.query.district_code = event.values[2]
        this.query.streets_code = event.values[3]
        this.active_name = event.labels
        this.getData()
      },
      /* 获取表格数据 */
      getData() {
        this.loading = true;
        this.$http
          .get("/schoole/index", {
            params: this.query
          })
          .then((res) => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 查询数据 */
      reload() {
        this.getData();
      },
      /* 重置搜索 */
      reset() {
        this.query = {
          page: 1,
          limit: 10,
        };
        this.reload();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selection = selection;
      },
      /* 显示编辑 */
      openEdit(row, isAdd) {
        if (isAdd) {
          this.current = {
            title: "",
            province_code: this.query.province_code || "",
            city_code: this.query.city_code || "",
            district_code: this.query.district_code || "",
            streets_code: this.query.streets_code || "",
          };
          this.showEdit = true;
          return;
        }
        this.current = row;
        this.showEdit = true;
      },
      openEdit1(row, name, type) {
        this.current1 = {
          title: name,
          shoole_title: row.title,
          id: row.id,
          schoole_id: row.id,
          isopen: row.isopen,
          mode: type,
        };
        this.showEdit1 = true;
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({
          lock: true
        });
        this.$http
          .post(`/schoole/delete`, {
            id: row.id
          })
          .then((res) => {
            loading.close();
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error("请至少选择一条数据");
          return;
        }
        this.$confirm("确定要删除选中的学校吗?", "提示", {
            type: "warning",
          })
          .then(() => {
            const loading = this.$loading({
              lock: true
            });
            this.$http
              .post("/schoole/delete", {
                id: this.selection.map((d) => d.id)
              })
              .then((res) => {
                loading.close();
                if (res.data.code === 0) {
                  this.$message({
                    type: "success",
                    message: res.data.msg
                  });
                  this.reload();
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 导出数据Excel */
      exportExcel() {
        let info = JSON.parse(JSON.stringify(this.query));
        this.$http.get("/user/exportExcel", info).then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        });
      },
      /**
       * 重置密码
       */
      resetPwd(row) {
        const loading = this.$loading({
          lock: true
        });
        this.$http
          .post("/user/resetPwd", {
            id: row.id
          })
          .then((res) => {
            loading.close();
            if (res.data.code === 0) {
              this.$message({
                type: "success",
                message: res.data.msg
              });
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
    },
  };
</script>

<style scoped>
  .toolbar-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .right_show {
    position: absolute;
    left: -15px;
    top: 2px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    background-color: #1890ff;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 30px;
    color: #fff;
  }
</style>
